<template>
  <div class="image-item">
    <el-row>
      <el-col :span="24">
        <el-button
          size="small"
          type="primary"
          @click="openImageListDialog"
        >图集选取</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="image-preview" :v-show="uploadImageList.length > 0">
          <vuedraggable
            v-if="uploadImageList && uploadImageList.length > 1"
            v-model="imageValue"
            @change="draggableChange"
          >
            <el-image
              v-for="image in uploadImageList"
              :key="image"
              style="width: 100px; height: 100px; margin-left: 5px"
              :src="image"
              :preview-src-list="uploadImageList"
            />
          </vuedraggable>
          <el-image
            v-for="image in uploadImageList"
            v-else
            :key="image"
            style="width: 100px; height: 100px; margin-left: 5px"
            :src="image"
            :preview-src-list="uploadImageList"
          />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :title="'选择图片'"
      :visible.sync="dialogImageVisible"
      :close-on-click-modal="false"
      :lock-scroll="true"
      :destory-on-close="true"
      append-to-body
      @close="closeImageListDialog"
    >
      <el-button
        type="success"
        style="margin-bottom: 15px"
        @click="confirmSelectImage"
      >
        确定
      </el-button>
      <tn-select-image
        ref="tnSelectImage"
        value=""
        :limit="limit"
        @change="selectImageChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import { isArray } from '../../utils'
import vuedraggable from 'vuedraggable'
import TnSelectImage from '../TNSelectImage'

export default {
  name: 'TnUploadImageItem',
  components: { TnSelectImage, vuedraggable },
  model: {
    prop: 'value',
    event: 'changeModelVal'
  },
  props: {
    limit: {
      type: Number,
      default: 1
    },
    // eslint-disable-next-line vue/require-default-prop
    value: {
      type: [String, Array]
    }
  },
  data() {
    return {
      imageValue: this.value,
      selectImgList: [],
      dialogImageVisible: false
    }
  },
  computed: {
    uploadImageList: {
      get: function() {
        if (!this.imageValue || this.imageValue.length === 0) {
          return []
        }
        // console.log('uploadImageList', self.imageValue)
        let base_url = process.env.VUE_APP_BASE_URL
        base_url = base_url.split(0, base_url.length - 2)
        if (isArray(this.imageValue)) {
          const newValue = []
          this.imageValue.forEach((item, index) => {
            // console.log(index, item)
            newValue.push(base_url + item)
          })
          return newValue
        } else {
          return [base_url + this.imageValue]
        }
      },
      set: function(value) {
        // console.log(value)
        // return value
        // this.uploadImageList = value
      }
    }
  },
  watch: {
    value(val) {
      // console.log('value', val)
      this.imageValue = val
    }
  },
  methods: {
    changeVal(val) {
      // console.log('change', val)
      this.$emit('changeModelVal', val)
      this.$emit('change', val)
    },
    openImageListDialog() {
      this.dialogImageVisible = true
      // this.$nextTick(() => {
      //   this.$refs.tnSelectImage.getImageListData()
      // })
    },
    closeImageListDialog() {
      // console.log('image list close')
      this.$refs.tnSelectImage.toDefault()
    },
    confirmSelectImage() {
      this.dialogImageVisible = false
    },
    draggableChange() {
      this.changeVal(this.imageValue)
    },
    selectImageChange(val) {
      this.imageValue = []
      this.$nextTick(() => {
        this.imageValue = val
        this.changeVal(this.imageValue)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.image-preview {
  margin-top: 5px;
}
</style>
